.playContainer {
  @apply bg-black w-full;
  font-family: Alibaba PuHuiTi 2;
  margin-top: 5rem !important;
  padding: 1.875rem 0;
  height: 52.083333vw;
  max-height: calc(100vh - 5rem);

  .playBox {
    @apply w-full h-full flex;

    .playArea {
      @apply w-full h-full flex flex-col bg-bg;

      .play {
        @apply relative bg-black w-full flex-1;

        .notVip {
          @apply absolute z-3 left-0 top-0;
        }
      }

      .playMenu {
        @apply w-full flex items-center justify-between;
        height: 3.75rem;

        .menuLeft,
        .menuRight {
          @apply flex;
        }

        .btn {
          @apply rounded inline-flex h-10 items-center justify-center relative text-white text-sm cursor-pointer;
          font-family: Alibaba PuHuiTi 2;
          width: 7.5rem;
          background: rgba(255, 255, 255, 0.1);

          &:hover {
            @apply opacity-80;
          }

          &:not(:first-child) {
            @apply ml-5;
          }

          & > img {
            width: 1.125rem;
            height: 1.125rem;
            margin-right: 0.625rem;
          }

          &.btnShare {
            .corn {
              @apply absolute h-5 w-5;
              right: -1.125rem;
              top: -0.5rem;
              perspective: 50px;
              transform-style: preserve-3d;
              animation: scales 0.5s 8;
            }

            @keyframes scales {
              0% {
                transform: rotateY(0deg);
              }

              100% {
                transform: rotateY(180deg);
              }
            }
          }

          &.btnMore {
            @apply relative;

            &::before {
              @apply absolute w-full left-0 h-4 z-4;
              top: -1rem;
              content: '';
            }
          }

          .btnHover {
            @apply absolute z-100 hidden;
            bottom: 3.2rem;
          }

          &:hover {
            @apply opacity-100;

            .btnHover {
              @apply flex;
            }
          }
        }
      }
    }

    .sectionBox {
      @apply h-full bg-bg p-5 flex flex-col shrink-0;
      width: 20.625rem;

      .titleName {
        @apply font-semibold text-white leading-5 text-xl;
        font-family: Alibaba PuHuiTi 2;
      }

      .teamDate {
        @apply font-medium flex justify-between pr-5 mt-5 mb-4 text-sm;
        color: #999999;

        .statusBtn {
          @apply inline-block rounded text-center text-sm h-7 leading-7;
          width: 4rem;

          &.statusNoStart {
            color: #f1c04e;
            background: rgba(241, 192, 78, 0.2);
          }

          &.statusLiving {
            color: #ff8a8a;
            background: rgba(255, 138, 138, 0.2);
          }

          &.statusEnd {
            color: #a6dc6f;
            background: rgba(166, 220, 111, 0.2);
          }
        }
      }

      .userBox {
        @apply flex items-center rounded-xl justify-center py-10;
        background: linear-gradient(270deg, #16233d 0%, #370d0e 100%);

        .vs {
          width: 3.75rem;
          height: 3.75rem;
        }

        .userItem {
          @apply flex flex-col items-center flex-1;

          .teamImg {
            width: 3.125rem;
            height: 3.125rem;
          }

          .teamName {
            @apply text-base text-white mb-10 mt-8 inline-block text-center;
            width: 6.25rem;
          }

          .teamScore {
            @apply font-black leading-8 text-white;
            font-family: OPPOSans;
            font-size: 2rem;
          }
        }
      }

      .competition {
        @apply text-white-80 text-base;
      }
    }
  }
}

.hotRace {
  @apply flex mt-5 w-full bg-bg25 rounded-lg overflow-hidden;
  height: 8.625rem;

  .hotLeft {
    @apply h-full flex items-center justify-center;
    width: 5.875rem;
    background-color: #2e2e2e;

    img {
      @apply object-contain;
      width: 3rem;
      height: 4.25rem;
    }
  }

  .hotRight {
    @apply flex-1 flex items-center justify-around;
    overflow-x: auto;

    &::-webkit-scrollbar {
      height: 0.125rem;
    }

    &::-webkit-scrollbar-thumb {
      @apply rounded-sm;
      background-color: #676767;
    }

    .hotItem {
      @apply flex flex-col items-center;

      & > img {
        @apply mb-2;
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 50%;
      }

      & > span {
        @apply text-sm whitespace-nowrap;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .playContainer {
    margin-top: 5.875rem !important;
    padding: 0;

    .playBox {
      &.playBoxPhone {
        @apply fixed z-4;
        top: 94px;
        height: 52.083333vw;
      }
    }
  }

  .titlePhone {
    @apply mt-5 px-4;
    margin-bottom: 10px;

    .arrow {
      @apply mx-2 inline-block align-middle;
    }

    span {
      @apply font-medium text-white-60 text-xl;
      font-family: Alibaba PuHuiTi 2;

      &:nth-child(1) {
        @apply text-white font-semibold;
      }
    }
  }

  .teamDatePhone {
    @apply font-medium flex items-center px-4 mb-4 text-xs;
    color: #999999;

    .titleSpace {
      @apply ml-1;
    }

    .statusBtn {
      @apply inline-block rounded text-center text-xs h-5 leading-5;
      width: 3rem;
      margin-left: 10px;

      &.statusNoStart {
        color: #f1c04e;
        background: rgba(241, 192, 78, 0.2);
      }

      &.statusLiving {
        color: #ff8a8a;
        background: rgba(255, 138, 138, 0.2);
      }

      &.statusEnd {
        color: #a6dc6f;
        background: rgba(166, 220, 111, 0.2);
      }
    }
  }

  .playMenuPhone {
    @apply w-full flex pl-4;

    .btn {
      @apply rounded inline-flex w-10 h-10 items-center justify-center relative mr-3;
      font-family: Alibaba PuHuiTi 2;
      background: rgba(255, 255, 255, 0.1);

      & > img {
        width: 1.125rem;
        height: 1.125rem;
      }

      &.btnShare {
        .corn {
          @apply absolute h-4 w-4;
          right: -0.4rem;
          top: -0.4rem;
          perspective: 50px;
          transform-style: preserve-3d;
          animation: scales 0.5s 8;
        }

        @keyframes scales {
          0% {
            transform: rotateY(0deg);
          }

          100% {
            transform: rotateY(180deg);
          }
        }
      }
    }
  }

  .hotRacePhone {
    @apply ml-4;
    width: calc(100% - 2rem);

    .hotTitle {
      @apply mt-5 text-lg mb-3;
      line-height: 1.6875rem;
      color: #cdcdcd;
    }

    .hotMain {
      @apply flex flex-nowrap overflow-x-auto;

      .hotItem {
        @apply shrink-0 flex flex-col items-center justify-center bg-bg25 rounded-lg mr-2;
        margin-bottom: 0.5625rem;
        width: calc(calc(100% - 2.5rem) / 3);
        height: 5.875rem;

        img {
          @apply w-10 h-10 rounded-lg;
        }

        span {
          @apply text-center block w-full text-xs;
          line-height: 1.125rem;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
}
// 横屏代码
@media screen and (max-width: 767px) and (orientation: landscape) {
  .playContainer {
    height: calc(100vmin - 94px);
    .playBox {
      &.playBoxPhone {
        @apply relative z-4;
        top: 0px;
        height: calc(100vmin - 94px);
      }
    }
  }
}
